<script setup lang="ts">
import LeftMenu from "@/components/menu/left-menu.vue";
import { RouterView, useRouter } from "vue-router";
import HeadView from "@/components/main/head-view.vue";
import { computed } from "vue";

const router = useRouter();

// 动态计算高度
const height = computed(() => `calc(100vh - 80px)`);

</script>

<template>
  <div class="main">
    <div class="menu-container">
      <LeftMenu />
    </div>
    <div class="main-container" :style="{ height: height }">
      <head-view></head-view>
      <el-scrollbar :height="height">
        <RouterView />
      </el-scrollbar>
    </div>
  </div>
</template>

<style scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
}
.menu-container {
  width: 200px;
  height: 100%;
}
.main-container {
  width: calc(100vw - 200px);
}
</style>
